<template>
	<view class="container">
		
		<view class="card" v-for="item in list" @click="go()">
			<view class="title-box">
				<view>{{item.postName}}</view>
				<view class="location">{{item.address}}</view>
			</view>
			<view class="pay-box">
				<view>{{item.salaryRange}}</view>
				<view class="unit">元/月</view>
			</view>
			<view class="description">
				职位描述：{{item.dutyDesc}}
			</view>
			<view class="time-box">
				<view>{{item.companyName}}</view>
				<view>
					<image src="@/static/image/getJob/line.png" mode="widthFix"></image>
				</view>
				<view>{{item.createTime}}</view>
			</view>
		</view>
		<!-- 如果没有数据显示的内容 -->
		<empty v-if="refreshing == false &&  list.length === 0"></empty>
		<!-- 上滑加载更多组件 -->
		<mix-load-more v-show="loadMoreStatus>-1" :status="loadMoreStatus"></mix-load-more>
	</view>
</template>

<script>
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import empty from "@/components/empty";
	export default {
		components:{mixLoadMore,empty},
		data() {
			return {
				// list:[
				// 	{
				// 		postName:'工厂车床操作技术员',
				// 		address:'秦家店村',
				// 		salaryRange:'5000-8000',
				// 		dutyDesc:'职责描述：1、负责CNC数控车床日常管理；2、组织安排打样生产，跟进产品加工进度及质量；3、优化完善数控',
				// 		company:'新希望电子厂',
				// 		createTime:'2011-03-21',
				// 	},
				// 	{
				// 		postName:'普工',
				// 		address:'秦家店村',
				// 		salaryRange:'4000-7000',
				// 		dutyDesc:'职责描述：1.操作自动焊机，按照作业标准工作；2.愿意学习者优先；3.有机械厂工作经验优先；',
				// 		company:'新希望电子厂',
				// 		createTime:'2011-03-21',
				// 	},
				// 	{
				// 		postName:'工厂车床操作技术员',
				// 		address:'秦家店村',
				// 		salaryRange:'5000-8000',
				// 		dutyDesc:'职责描述：1、负责CNC数控车床日常管理；2、组织安排打样生产，跟进产品加工进度及质量；3、优化完善数控',
				// 		company:'新希望电子厂',
				// 		createTime:'2011-03-21',
				// 	},
				// 	{
				// 		postName:'普工',
				// 		address:'秦家店村',
				// 		salaryRange:'4000-7000',
				// 		dutyDesc:'职责描述：1.操作自动焊机，按照作业标准工作；2.愿意学习者优先；3.有机械厂工作经验优先；',
				// 		company:'新希望电子厂',
				// 		createTime:'2011-03-21',
				// 	},
				// 	{
				// 		postName:'工厂车床操作技术员',
				// 		address:'秦家店村',
				// 		salaryRange:'5000-8000',
				// 		dutyDesc:'职责描述：1、负责CNC数控车床日常管理；2、组织安排打样生产，跟进产品加工进度及质量；3、优化完善数控',
				// 		company:'新希望电子厂',
				// 		createTime:'2011-03-21',
				// 	},
					
				// ],
				list:[],
				//
				loadMoreStatus:0,//0-可上拉显示更多，1-加载中；2-没有更多可加载
				count:0,//列表数据总共条数
				startIndex:1,//第几页，初始值为1
				pageSize:5,//每页查询多少条数据，默认为5
				refreshing:false,
				triggered:false,
				enableScroll:true,
				
			};
		},
		methods:{
			go(url){
				uni.showLoading({
					title:'加载中...'
				})
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
			/**
			 * 查询全部培训信息
			 * */
			queryPostInfoPage(){
				this.$api.request.queryPostInfoPage({
					areaCode:this.$api.util.getAreaCode(),
					startIndex:this.startIndex,//第几页
					pageSize: this.pageSize,//每页几条
					postRequire:null,
					published:null,
			
				}, (res) => {
					if (res.body.status.statusCode == '0') {
						this.list.push(...res.body.data.list)  //数据列表
						this.count = res.body.data.count//总数
						this.startIndex = res.body.data.startIndex//第几页
						
					}
				})
			},
			/**触底更新加载数据*/
			onReachBottom(){
				if(this.list.length >= this.count) {
					this.loadMoreStatus = 2
					return
				}
				this.loadMoreStatus = 1
				uni.showLoading({
					title: '加载中'
				});
				this.startIndex ++//改变页数
				this.queryPostInfoPage()
			}
			
		},
		onShow(){
			this.queryPostInfoPage()
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
	.container{
		padding: 32rpx;
	}
	.card{
		padding: 26rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		.title-box{
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			font-size: 32rpx;
			.location{
				color: #3E9CF9;
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.pay-box{
			margin-top: 16rpx;
			display: flex;
			color: #EE5E5E;
			font-size: 40rpx;
			overflow:hidden;
			.unit{
				font-size: 24rpx;
				margin-left: 10rpx;
				line-height: 54rpx;
			}
		}
		.description{
			margin-top: 16rpx;
			overflow:hidden;
			text-overflow:ellipsis;
			display:-webkit-box;
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			color: #999CA3;
			font-size: 24rpx;	
		}
		.time-box{
			display: flex;
			color: #999CA3;
			padding-top: 36rpx;
			view:nth-child(2){
				padding: 0 10rpx;
				image{
					width: 2rpx;
					height: 24rpx;
					vertical-align: middle;
				}
			}
		}
	}
</style>
